<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link type="text/css" rel="stylesheet" href="base.css" />

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jtopo-0.4.8-min.js"></script>
<script>
	$(document)
			.ready(
					function() {
						var canvas = document.getElementById('canvas');
						var stage = new JTopo.Stage(canvas); // 创建一个舞台对象
						var scene = new JTopo.Scene(stage); // 创建一个场景对象
						scene.background ="";// 'bg.jpg';

						//  var node = new JTopo.Node("Hello");    // 创建一个节点
						// node.setLocation(300,200);    // 设置节点坐标
						// node.setImage('Cloud_server-128.png'); // 设置图片
						// scene.add(node); // 放入到场景中


                            function addNode(text, color){
                                var node = new JTopo.Node();
                                node.font="27px Consolas";
                                node.setSize(100, 60);
                                node.setImage(color +'.png ', true);
                                node.fontColor = '0,0,0';

                                scene.add(node);


							node.mouseover(function() {
								this.text = text;
							});
							node.mouseout(function() {
								this.text = null;
							});
							return node;
						}

						function addLink(nodeA, nodeZ) {
							var link = new JTopo.FlexionalLink(nodeA, nodeZ);
							link.strokeColor = '204,204,204';
							link.lineWidth = 1;
							scene.add(link);
							return link;
						}

						var rootNode = addNode('cloud');
						rootNode.setImage('Cloud_server-128.png');


						
						var a;
						$.ajax({
							url:"../../data_small_api.json",
							type:"get",
							async:false,
							success:function(e){
								a=e;
							},error:function(e){
								alert(e);
							}
						});
						
						var b = a.nodes;

						//console.log(b);
						var arr = [];
						for ( var a = 0; a < b.length; a++) {
							arr = b[a];//.length;
							//console.log(arr);

							// var str=JSON.stringify(a)
						}

						//////////////////////////
						var icons = [ 'green', 'blue', 'red1', 'red2' ];
						var icons = 1
						for ( var i = 0; i < 1; i++) {
							//console.log(b[1]);
							var node = addNode(JSON.stringify(b[0]));

							node.setImage('networking_icons-04.png');
							addLink(rootNode, node);

							for ( var j = 0; j < 1; j++) {
								var thirdNode = addNode(JSON.stringify(b[1]));
								thirdNode
										.setImage('wifi_router_double_antenna_internet_online_web-128.png');
								addLink(node, thirdNode);

								for ( var k = 2; k < b.length; k++) {
									var text=JSON.stringify(b[k]);
									var Node = addNode(text);
									if(text.indexOf("Switch")>-1){
										//console.log("Switch",text);
										
										Node.setImage('wifi_router_double_antenna_internet_online_web-128.png');
									}

									else if(text.indexOf("AirPort")>-1){

										//console.log("AirPort",text);
										Node.setImage('wireless-router_basic_blue.png');
									}
									

									else if(text.indexOf("Router")>-1){

										//console.log("Router",text);
										Node
										.setImage('networking_icons-04.png');
									}
									
									//Node
										//	.setImage('wireless-router_basic_blue.png');
									addLink(thirdNode, Node);
								}

							}
						}
						// 树形布局
						scene
								.doLayout(JTopo.layout.TreeLayout('down', 150,
										107));
					});
</script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function(){

        $(".topo").click(function(){
           window.location.href="../../index.php?re_topo";
        });

    });

</script>
</head>
<body>

<div class="col-xs-6" style="height:30px;">
    <a class="btn btn-default topo">重新生成图片</a>

</div>
	<canvas
		style="background-color: rgb(238, 238, 238); border: 1px solid rgb(68, 68, 68); cursor: default;"
		width="1900" height="950" id="canvas"></canvas>
</body>
</html>
